<script setup lang="ts" name="RulerLine">

const emits = defineEmits(['onMouseDown', 'onRelease', 'onRemove'])

const props = defineProps({
  scale: {
    type: Number,
    required: true
  },
  thick: {
    type: Number,
    required: true
  },
  index: {
    type: Number,
    required: true
  },
  start: {
    type: Number,
    required: true
  },
  vertical: {
    type: Boolean
  },
  value: {
    type: Number,
    required: true
  },
  isShowReferLine: {
    type: Boolean
  }
})

const startValue = ref(0)
const showLine = ref(true)
onMounted(() => {
  startValue.value = props.value!
})

const setShowLine = (offset: number) => {
  showLine.value = offset >= 0
}

const offset = computed(() => {
  const offset = (startValue.value - props.start!) * props.scale!
  setShowLine(offset)
  const positionValue = offset + 'px'
  const position = props.vertical
    ? { top: positionValue }
    : { left: positionValue }
  return position
})

const borderCursor = computed(() => {
  const cursorValue = props.isShowReferLine
    ? props.vertical
      ? 'ns-resize'
      : 'ew-resize'
    : 'none'
  return {
    cursor: cursorValue
  }
})

const actionStyle = computed(() => {
  const actionStyle = props.vertical
    ? { left: props.thick + 'px' }
    : { top: props.thick + 'px' }
  return actionStyle
})

const handleDown = (e: MouseEvent) => {
  const startD = props.vertical ? e.clientY : e.clientX
  const initValue = startValue.value
  emits('onMouseDown')
  const onMove = (e: MouseEvent) => {
    const currentD = props.vertical ? e.clientY : e.clientX
    const newValue = Math.round(
      initValue + (currentD - startD) / props.scale!
    )
    startValue.value = newValue
  }
  const onEnd = () => {
    emits('onRelease', startValue.value, props.index)
    document.removeEventListener('mousemove', onMove)
    document.removeEventListener('mouseup', onEnd)
  }
  document.addEventListener('mousemove', onMove)
  document.addEventListener('mouseup', onEnd)
}

const handleRemove = () => {
  emits('onRemove', props.index)
}
</script>

<template>
  <div v-show="showLine" :class="['line', props.vertical ? 'top' : 'left']" :style="[offset, borderCursor]" @mousedown="handleDown">
    <div class="action" :style="actionStyle">
      <span class="value">{{ startValue }}</span>
      <span class="del" @click="handleRemove">&times;</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.line {
  position: absolute;
  pointer-events: auto;

  &.top{
    border-top: 1px solid var(--el-color-primary);

    .action{
      padding-left: 6px;
    }

    .value{
      line-height: 1;
    }
  }

  &.left{
    border-left: 1px solid var(--el-color-primary);

    .value{
      line-height: 2;
    }
  }

  .action {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .value {
    transform: scale(0.9);
    user-select: none;
    pointer-events: none;
  }

  .del {
    padding: 0 5px;
    line-height: 1;
    visibility: hidden;
    cursor: pointer;
  }

  &:hover .del {
    visibility: visible;
  }
}
</style>
